@import '../../css/Variable.styl'

.EmojiPickerPopover .popover
  max-width unset

.EmojiReactions
  display flex
  align-items center
  justify-content flex-end
  flex 1
  flex-wrap wrap
  overflow auto

.EmojiReactionButton__button, .EmojiReactionButton__buttonpicker
  border-radius standardBorderRadius
  white-space pre
  &:not(:disabled)
    cursor pointer
  &:not(.primaryColorBgOpacity)
    background transparent

.EmojiReactionButton__button
  border none
  font-size metadataFontSize
  margin-inline-end textSpacing
  padding 3px
  &:not(.primaryColorBgOpacity)
    background-color lightGrey2

  &:hover:not(:disabled)
    filter brightness(0.95)

  &__value
    font-family 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji', sans-serif

  &__count
    display inline-block
    text-align end
    margin-inline-start textSpacing
    @media (min-width: min-lg)
      min-width 1.5ex // INFO - RJ - 2021-03-17 - prevent the button from resizing when the count changes

  > *
    color fontColor

.EmojiReactionButton__buttonpicker
  color grey
  border none
  color darkGrey2
  &:hover:not(:disabled)
    color fontColor
  &.active
    color fontColor

.EmojiReactionButton__button:hover:not(.highlighted):not(:disabled), .EmojiReactionButton__buttonpicker:hover:not(.active):not(:disabled)
  color fontColor

.emoji-mart
  border none
.emoji-mart button, .emoji-mart-category button.emoji-mart-emoji span
  // INFO - RJ - 2021-03-18 - This class is intentionally specific to overwrite emoji-mart's own CSS rule
  cursor pointer
